import React from 'react'
import { useState } from 'react'
import './index.css'

export default function Item({todo,done,id,todoList,setTodoList}) {
   //isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive,setIsActive]=useState(false);

  //鼠标移入移出的事件函数
  const mouseHandle=(bool)=>{
     //外层函数用来接收参数,返回的函数是真正的事件函数
    return ()=>{
      setIsActive(bool)
    }
  }

  // 多选框触发改变的事件函数
  const checkChangeHandle=(e)=>{
    const newTodo=todoList.map(item=>{
      if(item.id===id){
        item.done=e.target.checked;
      }
      return item
    })
    setTodoList(newTodo)

  }

  const deleteHandle=()=>{
    const newTodoList=todoList.filter(item=>{
      return item.id!=id
    })
    setTodoList(newTodoList)
  }
    // console.log(todo,done);
  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive?'active':''}>
    <label>
      <input type="checkbox" checked={done} onChange={checkChangeHandle} />
      <span>{todo}</span>
    </label>
    <button className="btn btn-danger" onClick={deleteHandle} style={{ display: isActive?'block':'none' }}>删除</button>
  </li>
  )
}



